<style scoped>
.portitem {
  vertical-align: middle;
  line-height: 50px;
  height: 50px;
  border: 0.5px solid #d5d5d5;
  border-radius: 25px;
  margin-top: 5px;
}
.urltext {
  color: #403427;
  text-decoration-line: underline;
}
.portitem .el-button--primary {
  font-size: 40px;
  padding: 0;
  line-height: 46px;
  width: 46px;
}
</style>
<style>
.portitem .el-icon-success {
  color: green !important;
}
.portitem .el-icon-error {
  color: red !important;
}
.protname {
    border-right: 1px solid #dddddd;
    text-align: center;
    background: #409EFF;
     border-radius: 25px;
     color: #ffffff;
     font-size: 22px;
}
</style>

<template>
  <div>
    <section class="demo-text">
      <el-button-group>
        <el-button @click="addport">新增请求</el-button>
        <el-button @click="downloadfile">下载文件</el-button>
        <el-input style="width:auto" v-model="filename" auto-complete="off"></el-input>
      </el-button-group>
      <div style="width:80%">
        <el-row v-for="(item,index) in portlist" :key="'port'+index" class="portitem">
          <el-col :span="3" class="protname">
            {{item.name||'port'+item.index}}
          </el-col>
          <el-col :offset="1" :span="11" class="urltext">&nbsp;<a :href="item.url" target="_blank" rel="noopener noreferrer" style="

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;"><span>{{item.url}}</span> </a></el-col>
          <el-col :span="8">
            <el-tooltip
              class="item"
              effect="dark"
              content="连通状态"
              :open-delay="500"
              placement="bottom"
            >
              <el-button type="primary" :icon="'el-icon-'+item.status"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="500"
              content="发起请求"
              placement="bottom"
            >
              <el-button type="primary" icon="el-icon-refresh" @click="getdata(item,index)"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="500"
              content="修改接口"
              placement="bottom"
            >
              <el-button type="primary" icon="el-icon-edit" @click="handleEdit(item,index)"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="500"
              content="删除接口"
              placement="bottom"
            >
              <el-button type="primary" icon="el-icon-delete" @click="handleRemove(item,index)"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="500"
              content="下载文件"
              placement="bottom"
            >
              <el-button type="primary" icon="el-icon-download" @click="downloaditem(item)"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="500"
              content="打印输出"
              placement="bottom"
            >
              <el-button type="primary" icon="el-icon-printer" @click="Console(item,index)"></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <el-dialog title="添加接口" :visible.sync="dialogFormVisible">
        <el-form :model="formdata" ref="formdata">
          <el-form-item label="接口名称" label-width="150px">
            <el-input v-model="formdata.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="Url" label-width="150px">
            <el-input v-model="formdata.url" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleFormSumit">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看结果" :visible.sync="dialogJsonviwer">
        <json-viewer
          style="height:50vh;overflow:auto"
          :value="Jsonviwer"
          :expand-depth="5"
          copyables
        ></json-viewer>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogJsonviwer=false">确 定</el-button>
        </div>
      </el-dialog>
    </section>
    <p
      style="text-align:right;padding-right:60px;    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;"
    >@王睿杰 2019.7.25</p>
  </div>
</template>
<script>
function Port(name, index) {
  this.url = "";
  this.status = "question";
  this.name = name;
  this.index = index;
  this.data = "";
}
import { JsonTojs } from "@/js/JosnTojs";
export default {
  data() {
    return {
      portlist: [],
      formdata: {
        url: "",
        status: "",
        name: "",
        index: "",
        data: ""
      },
      index: 0,
      dialogFormVisible: false,
      dialogJsonviwer: false,
      showindex: 0,
      filename: "",
      edittype: "add"
    };
  },
  computed: {
    Jsonviwer() {
      return this.portlist[this.showindex];
    }
  },
  methods: {
    Console(item, index) {
      //   console.log(item.name + "：", item.data || "无数据");
      this.showindex = index;
      this.dialogJsonviwer = true;
    },
    downloadfile() {
      let list = this.portlist.filter(element => {
        return element.status == "success";
      });
      if (list.length == 0) {
        this.$message({
          message: "未获得数据，无法下载",
          type: "warning"
        });
        return;
      }
      JsonTojs(list, this.filename);
    },
    downloaditem(item) {
      if (item.status == "success") {
        JsonTojs([item], item.name);
      } else {
        this.$message({
          message: "未获得数据，无法下载",
          type: "warning"
        });
      }
    },
    handleCancel() {
      this.dialogFormVisible = false;
      this.$nextTick(() => {
        this.formdata = {
          url: "",
          status: "",
          name: "",
          index: "",
          data: ""
        };
      });
    },
    handleFormSumit() {
      if (this.edittype == "add") {
        this.portlist.push(this.formdata);
      }
      this.handleCancel();
    },
    addport() {
      this.formdata = new Port("port" + this.index, this.index);
      this.index = this.index +1;
      this.dialogFormVisible = true;
      this.edittype = "add";
    },
    handleEdit(item) {
      this.formdata = item;
      this.dialogFormVisible = true;
      this.edittype = "edit";
    },
    handleRemove(item, index) {
      this.portlist.splice(index, 1);
    },
    getdata(item) {
      item.status = "loading";
      item.data = "";
        let fromdata = new FormData();
      this.$axios({
        method: "post",
        url: item.url,
        data:fromdata
      })
        .then(response => {
          console.log(response)
          item.status = "success";
          item.data = response.data.data;
        })
        .catch(error => {
          item.status = "error";
        });
    }
  },
  updated(){
      localStorage.setItem("pootdata",JSON.stringify(this.portlist))
  },
  mounted(){
      let postdata =localStorage.getItem("pootdata")
      if(postdata){
              this.portlist = JSON.parse(postdata)  
      }
 
  }
};
</script>
